1 00:00:00,690 --> 00:00:03,840 Helo our Welcome to this leg shot in this leg. 2 00:00:03,840 --> 00:00:08,710 Sure we are going to be team the presentation for our app. 3 00:00:08,910 --> 00:00:15,580 This is the our chawl see SS that will use to start the app. 4 00:00:16,110 --> 00:00:19,730 So this is how the app looks like at the moment. 5 00:00:19,730 --> 00:00:21,330 This is what the page looks like. 6 00:00:21,540 --> 00:00:29,530 So once we've applied the styling issue to see it looking much prettier than this. 7 00:00:29,910 --> 00:00:39,740 Before I explain the stylin let me run through quickly some of the attributes we will use here. 8 00:00:39,930 --> 00:00:45,110 So we have used some attributes like for example here we've got an idea. 9 00:00:45,330 --> 00:00:51,130 So we're going to use this I.D. to see how this dph here is very deep. 10 00:00:51,130 --> 00:00:56,550 And we've also got some ideas here for the span. 11 00:00:56,550 --> 00:01:04,650 So anywhere and then with anywhere we've got I will use the idea to do this tiling where we've got no 12 00:01:04,650 --> 00:01:14,210 idea it will use the outroar tags to do the Stein in for example down the body with cassava hay stack. 13 00:01:14,370 --> 00:01:19,500 So the way this is the way I'm gonna explain this I've already written this. 14 00:01:19,500 --> 00:01:24,460 He says just to save time I will just run through the. 15 00:01:24,590 --> 00:01:26,010 He says with you. 16 00:01:26,190 --> 00:01:28,710 So let me open obviously a six page here. 17 00:01:28,710 --> 00:01:35,270 This is the actual style tags so this is this the SS So I've started with the body here. 18 00:01:35,310 --> 00:01:36,360 So when. 19 00:01:36,360 --> 00:01:37,930 So this is how you do it. 20 00:01:37,950 --> 00:01:41,650 But you write the name of the tag is the body tag. 21 00:01:41,950 --> 00:01:49,380 In between the curly braces is where you specify the type of style you want to use for the body. 22 00:01:49,710 --> 00:01:58,050 So I've said here on line 3 that for the body which is what they call content of the page I want the 23 00:01:58,040 --> 00:02:04,390 font family to be Helvetica Ariel and sansevero. 24 00:02:04,590 --> 00:02:06,580 So this is a first choice. 25 00:02:06,580 --> 00:02:16,870 So if you open this app on your Web browser if your computer has now got help vertica a tool use aerial. 26 00:02:16,920 --> 00:02:19,850 If he hasn't got Ero Ito you have sanscrit. 27 00:02:19,980 --> 00:02:21,180 So that's how it works. 28 00:02:21,180 --> 00:02:28,290 You always need to specify more than one font family in case the computer viewer on the page doesn't 29 00:02:28,290 --> 00:02:30,900 have the first one you have defined. 30 00:02:30,910 --> 00:02:33,440 He can use this substitute. 31 00:02:33,690 --> 00:02:35,520 Next define the margin. 32 00:02:35,570 --> 00:02:44,150 I'm giving it a value of 50 pixels margin because CLI is the space from you know from the corner. 33 00:02:44,190 --> 00:02:49,340 So it would be space from now the left the way the margin is define you. 34 00:02:49,380 --> 00:03:00,600 You define it from top right bottom left the way I tend to remember that is using the word trouble and 35 00:03:00,600 --> 00:03:13,420 taking that Valse So you now believe t for top R for right and then B for bottom and then well for left. 36 00:03:13,450 --> 00:03:16,110 If we take out the vowels were left those four. 37 00:03:16,140 --> 00:03:23,910 That's how I remember it's always wave for you if you specify just one value to apply the 50 pixels 38 00:03:23,910 --> 00:03:25,500 to all four sides. 39 00:03:25,500 --> 00:03:28,100 Top right bottom left. 40 00:03:28,140 --> 00:03:35,960 So if you specify two values you will as well you will apply the first value to the top and the bottom. 41 00:03:36,110 --> 00:03:41,400 So on value to the left B right. 42 00:03:41,760 --> 00:03:42,160 Okay. 43 00:03:42,180 --> 00:03:47,980 So that's how the margin work so I have specified 50 pics so that means it will apply to all four corners. 44 00:03:48,190 --> 00:03:49,570 It a background. 45 00:03:49,620 --> 00:03:55,620 This is hex values with the back ground column about next. 46 00:03:55,710 --> 00:03:59,320 This is the symbol for an idea hash. 47 00:03:59,490 --> 00:04:06,710 So this is the content our Deve here give it with our system 50 pixels. 48 00:04:06,710 --> 00:04:08,600 That's how wide our one is. 49 00:04:08,820 --> 00:04:14,560 When you are specify your success you must always end the line in semicolon. 50 00:04:14,580 --> 00:04:16,190 If not it will not work. 51 00:04:16,350 --> 00:04:23,200 If you notice all the semicolons I've specified at the end of the declaration. 52 00:04:23,310 --> 00:04:24,950 Okay that's very important. 53 00:04:25,230 --> 00:04:28,990 So there's value here with giving this value comma. 54 00:04:29,050 --> 00:04:33,280 So you put a call on to separate that from the value. 55 00:04:33,300 --> 00:04:40,890 Notice it article on here is separate from the value and then giving the height of 350 pixels the background 56 00:04:40,890 --> 00:04:42,450 colour of giving it. 57 00:04:42,450 --> 00:04:50,850 This is our x values and marginal tool when you set the margin and you give you the value of or to what 58 00:04:50,850 --> 00:04:51,440 this will do. 59 00:04:51,450 --> 00:04:57,720 It will send to the div in the P centres in the in the page. 60 00:04:57,720 --> 00:04:59,040 That's what I'm done here. 61 00:04:59,040 --> 00:04:59,810 This is how you. 62 00:04:59,860 --> 00:05:07,610 Pacify a comment in C Ss slash Asterix and anything in between there is ignored by the web browser. 63 00:05:07,630 --> 00:05:12,020 So when this page displays this text there will not be seen. 64 00:05:12,460 --> 00:05:17,890 All right saw last that for the container and then the H1 tag here. 65 00:05:18,000 --> 00:05:25,990 This one is a head in tack so I've given it the font size that I want the text to be forty seven pixels 66 00:05:26,830 --> 00:05:27,890 giving me a font. 67 00:05:27,900 --> 00:05:40,050 Wait that is how bald the text will be six hundred shoreless press 5 pixels for k shibulal case. 68 00:05:40,450 --> 00:05:43,110 All right and then here that's a column. 69 00:05:43,150 --> 00:05:50,490 This column here refers to the column of did text the background colour coded text transformation. 70 00:05:50,560 --> 00:05:51,860 That means tool. 71 00:05:51,880 --> 00:05:54,220 Make it upper case. 72 00:05:54,460 --> 00:05:54,920 Okay. 73 00:05:54,940 --> 00:05:58,250 That's why they transform from its margin. 74 00:05:58,390 --> 00:06:01,130 Again I expend marginalia from the bottom. 75 00:06:01,150 --> 00:06:05,890 I wanted to move 20 pixels margin from the left. 76 00:06:05,890 --> 00:06:12,040 That means from the left I want it to move a hundred and seventy pixels. 77 00:06:12,130 --> 00:06:13,310 Background colour. 78 00:06:13,330 --> 00:06:17,470 Given that padding is a space inside the document. 79 00:06:17,470 --> 00:06:25,990 So I've given it ten pixels which will apply to all four padding and margin works in the same way. 80 00:06:26,080 --> 00:06:31,260 The padding this up like that is top right bottom left. 81 00:06:31,690 --> 00:06:32,320 Okay. 82 00:06:32,360 --> 00:06:39,820 Body radios is what given me five pixels the body does basically makes the corners a bit rounded and 83 00:06:39,820 --> 00:06:51,190 then this blaye in line block displays the text in line as a block element and then we've got two other 84 00:06:51,290 --> 00:06:52,380 ideas here. 85 00:06:52,390 --> 00:07:00,880 This idae weekday so the font window weekdays displayed for example if it displays Today is Saturday. 86 00:07:00,880 --> 00:07:08,590 This is the propertys I want the text to have I want it to have a size of 80 pixels. 87 00:07:08,590 --> 00:07:11,220 The call will have specified. 88 00:07:11,350 --> 00:07:14,780 You could use normal cos you don't have to use scholars. 89 00:07:14,780 --> 00:07:21,030 I could have replace this and just say red and so on so it does work for that as well font weight. 90 00:07:21,070 --> 00:07:25,410 This is hardboard or how bold the Ficke the font will be. 91 00:07:25,420 --> 00:07:27,400 I've given it a unread. 92 00:07:27,580 --> 00:07:29,460 I can put pixels. 93 00:07:29,590 --> 00:07:31,690 Forgot to put a pixels. 94 00:07:32,290 --> 00:07:39,150 Then the phrase here again this is a phrase that will be displayed next to day of the week. 95 00:07:39,190 --> 00:07:44,230 Again I'm giving it this properties here font size Carlo font. 96 00:07:44,230 --> 00:07:46,680 Weight margin are. 97 00:07:46,750 --> 00:07:53,710 And once I'd done that save my document and then brout go to the page again. 98 00:07:53,800 --> 00:07:55,860 So this is a page to refresh it. 99 00:07:55,870 --> 00:07:57,640 You should see the impact. 100 00:07:57,700 --> 00:08:01,340 All right so this is what the page looks like now. 101 00:08:01,360 --> 00:08:03,440 This is why they have looks like. 102 00:08:03,450 --> 00:08:10,090 Note it is not actually displayed the day of the week yet because we have not implemented the javascript. 103 00:08:10,090 --> 00:08:17,920 The Javascript is what will do the magic in determine to determine what date is B's on the computer 104 00:08:17,920 --> 00:08:18,620 clock. 105 00:08:18,670 --> 00:08:22,870 Look at your computer clock and from there determine what day it is. 106 00:08:22,870 --> 00:08:28,430 It'll then display the day of the week here and then also always got displayed quote. 107 00:08:28,450 --> 00:08:30,880 It will replace this and insert it. 108 00:08:30,920 --> 00:08:34,920 Quote We have specified in the javascript array. 109 00:08:34,960 --> 00:08:38,150 So we all do that in the javascript section. 110 00:08:38,410 --> 00:08:40,360 That's it for this local. 111 00:08:40,480 --> 00:08:42,040 Thank you so much for your time. 112 00:08:42,040 --> 00:08:43,150 Take care. 113 00:08:43,150 --> 00:08:44,080 Bye for now.